<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/cart.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/excart.css}"/>
</head>
<body>
<div class="Top">
    <ul style="width: 300px;">
        <li><a th:href="@{/index/food}">首页</a></li>
        <li><a th:href="@{/index/hotFood}">热门</a></li>
        <li><a th:href="@{/index/evaluate}">用户评价</a></li>
    </ul>
    <ul style="width: 500px;">
        <li style="text-align: end;" th:if="${session.loginUser == null or session.loginUser == ''}"><a th:href="@{/login/toUserLogin}">登录</a></li>
        <li style="text-align: end;" th:if="${session.loginUser == null or session.loginUser == ''}"><a th:href="@{/login/toRegister}">注册</a></li>
        <li th:if="${session.loginUser != null and session.loginUser != ''}" class="Yonghu" style="position: relative;height: 34px;left: 30px;line-height: 34px;">当前用户：<span th:text="${session.loginUser.ofUserName}" /> <img th:src="@{/images/jianto.png}" alt="" style="width: 16px;margin-left: 10px;margin-bottom: -2.8px;">
            <div class="yonghu">
                <a th:href="@{/index/personal}">个人中心</a>
                <a th:href="@{/order/toOrder}">我的订单</a>
                <a th:href="@{/login/exitLogin}">退出登录</a>
            </div>
        </li>
        <li style="text-align: end;"><a th:href="@{/order/toCart}">购物车</a></li>
        <li style="text-align: end;"><a th:href="@{/login/toAdmin}" target="_blank">管理</a></li>
    </ul>
</div>
<div class="Top2">
    <div style="width: 100%;">
        <div class="center" style="width: 80%; margin: 0 auto;height: 120px;">
            <img th:src="@{/images/logo2.jpeg}" alt="" width="144px" style="float: left;">

            <div class="theme">
                <i style="font-size: 30px;font-style: normal;">购物车</i>
                <i style="font-size: 13px;color: slategray;font-style: normal;margin-left: 15px;">温馨提示:
                    产品是否购买成功，以最终下单为准哦，请尽快结算</i>
            </div>
        </div>

    </div>
</div>
<div id="cart">
    <div class="cart_bg">
        <th:block th:unless="${#lists.isEmpty(mapList)}">
            <div class="list center">
                <div class="top2 center">
                    <div class="sub_top fl">食品图片
                    </div>
                    <div class="sub_top fl">食品名称</div>
                    <div class="sub_top fl">单价</div>
                    <div class="sub_top fl">数量</div>
                    <div class="sub_top fl">小计</div>
                    <div class="sub_top fr">操作</div>
                    <div class="clear"></div>
                </div>
                <th:block th:each="item : ${mapList}">
                    <div class="content2 center">
                        <div class="sub_content cover fl"><img th:src="@{'/images/'+${item.OF_FOOD_PICTURE}}"></div>
                        <div class="sub_content fl ft20" th:text="${item.OF_FOOD_NAME}"></div>
                        <div class="sub_content fl" th:text="${item.OF_FOOD_PRICE+'元'}"></div>
                        <div class="sub_content fl">
                            <input class="goods_count" th:id="${item.OF_ORDER_ID}" type="number"
                                   th:onblur="'updateItem('+${item.OF_ORDER_ID}+')'"
                                   th:value="${item.OF_ORDER_NUMBER}" step="1" min="1"
                                   max="5">
                        </div>
                        <div class="sub_content fl"><span class="money" th:text="${item.OF_ORDER_NUMBER*item.OF_FOOD_PRICE}"></span><span>元</span></div>
                        <div class="sub_content fl"><a href="##" th:onclick="'deleteItem('+${item.OF_ORDER_ID}+')'">×</a>
                        </div>
                        <div class="clear"></div>
                    </div>
                </th:block>
            </div>
        </th:block>
        <div class="pre_order mt20 center">
            <div class="tips fl ml20">
                <ul>
                    <li><a th:href="@{/index/food}">继续添加</a></li>
                    <li>|</li>
                    <li>共<span id="zs"></span>件食品</li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="order_div fr">
                <div class="order_total fl">合计 ：<span id="zj"></span><span>元</span></div>
                <div class="order_button fr">
                    <input class="order_button_d" type="button" name="settle"
                           onclick="settle()"
                           value="结算"/>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="Footer">

    <div class="ffirst">
        <div>
            <i></i>
            <p>预约服务</p>
        </div>
        <div>
            <i></i>
            <p>退餐明示</p>
        </div>
        <div>
            <i></i>
            <p>免费赠品</p>
        </div>
        <div>
            <i></i>
            <p>满50元折扣</p>
        </div>
        <div>
            <i></i>
            <p>其它网店</p>
        </div>
    </div>
    <div class="Fsecond">
        <div class="fsecond-l">
            <div class="fsecond">
                <p>帮助中心</p>
                <ul>
                    <li>账户管理</li>
                    <li>订餐指南</li>
                    <li>订单操作</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>服务支持</p>
                <ul>
                    <li>售后政策</li>
                    <li>自助服务</li>
                    <li>相关下载</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>线下门店</p>
                <ul>
                    <li>美食之家</li>
                    <li>服务网点</li>
                    <li>授权体验店</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>关于美食</p>
                <ul>
                    <li>了解美食</li>
                    <li>加入美食</li>
                    <li>订投资者关系</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>关注我们</p>
                <ul>
                    <li>新浪微博</li>
                    <li>官方微信</li>
                    <li>联系我们</li>
                </ul>
            </div>
            <div class="fsecond">
                <p>特色服务</p>
                <ul>
                    <li>F码通道</li>
                    <li>礼物码</li>
                    <li>防伪查询</li>
                </ul>
            </div>
        </div>
        <div class="fsecond-R">
            <h2>400-100-5678</h2>
            <p>8:00-18:00(仅收市话费)</p>
            <div class="worker">
                <p>人工客服</p>
            </div>
            <div class="mi">关注夏日:
                <i><img th:src="@{/images/wb.png}" alt="" style="width: 45px;"></i>
                <i><img th:src="@{/images/wx.png}" alt=""></i>
            </div>
        </div>
    </div>
    <div class="Ffinaly">
        <div class="ffinaly">
            <img th:src="@{/images/erweima.png}" style="position: absolute;width: 79px;margin-left: 1093px;">
            <div class="one">
                <ul>
                    <li>夏日美食</li>
                    <li>MEISHI</li>
                    <li>服务</li>
                    <li>菜谱</li>
                    <li>有品</li>
                    <li>食材开放平台</li>
                    <li>活动</li>
                    <li>资质证照</li>
                    <li>政企服务</li>
                    <li>线下店</li>
                    <li>店铺安全隐私政策</li>
                    <li>食品安全隐私政策</li>
                    <li>夏日美食用户协议</li>
                    <li>问题反馈</li>
                </ul>
            </div>
            <div class="two">
                <p>
                    <a href="">© mi.com</a>
                    <a href="">京ICP证110507号</a>
                    <a href="">京ICP备10046444号</a>
                    <a href="">京公网安备11010802020134号</a>
                    <a href="">京网文[2020]0276-042号</a>
                </p>
                <p>
                    <a href="">（京）网械平台备字（2018）第00005号</a>
                    <a href="">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
                    <a href="">营业执照</a>
                    <a href="">医疗器械公告</a>
                </p>
                <p>
                    <a href="">增值电信业务许可证 </a>
                    <a>网络食品经营备案京食药网食备202010048 </a>
                    <a href="">食品经营许可证</a>
                </p>
                <p>
                    <a>违法和不良信息举报电话：171-5104-4404</a>
                    <a href="">知识产权侵权投诉</a>
                    <a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
                </p>
            </div>
        </div>
    </div>
</div>
</body>
<!-- jQuery -->
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/sweetalert.min.js}"></script>
<script type="text/javascript">
    var zs=0,zj=0;
    $('.goods_count').each(function () {
        zs1=Number($(this).val());
        zs = zs+zs1;
    });
    $('.money').each(function () {
        zj1=Number($(this).text());
        console.log($(this).text());
        zj = zj+zj1;
    });
    $('#zs').text(zs);
    $('#zj').text(zj);

    /**
     * 购物车中数量为0时提示
     */
    function tip() {
        swal("购物车中无数据，无法结算", {
            icon: "error",
        });
    }

    /**
     * 跳转至结算页面
     */
    function settle() {
        var arr = [];
        $('.goods_count').each(function () {
            arr.push($(this).attr("id"));
        });
        var ids=arr;
        $.ajax({
            url:'/order/buyCart',
            type:'post',
            contentType: 'application/json',
            data: JSON.stringify(ids),
            success: function (result) {
                if (result.code == 200) {
                    window.location.href = '/index/payment';
                } else {
                    swal("操作失败", {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
        return false;
    }

    /**
     *更新购物项
     */
    function updateItem(id) {
        var goodsCount = $("#" + id).val();
        if (goodsCount > 5) {
            swal("单个商品最多可购买5个", {
                icon: "error",
            });
            return;
        }
        if (goodsCount < 1) {
            swal("数量异常", {
                icon: "error",
            });
            return;
        }
        var data = {
            "ofOrderId": id,
            "ofOrderNumber": goodsCount
        };
        $.ajax({
            type: 'post',
            url: '/order/saveCart',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.code == 200) {
                    window.location.reload();
                } else {
                    swal("操作失败", {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }

    /**
     * * 删除购物项
     * @param id
     */
    function deleteItem(id) {
        swal({
            title: "确认弹框",
            text: "确认要删除数据吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
                if (flag) {
                    $.ajax({
                        type: 'post',
                        url: '/order/delCart?orderId=' + id,
                        success: function (result) {
                            if (result.code == 200) {
                                window.location.reload();
                            } else {
                                swal("操作失败", {
                                    icon: "error",
                                });
                            }
                        },
                        error: function () {
                            swal("操作失败", {
                                icon: "error",
                            });
                        }
                    });
                }
            }
        )
        ;
    }
</script>
</html>
